<template> 
    <div class="article-detail" v-if="pageShow"> 
        <div class="head">{{detailData.title}}</div>
        <div class="art-info clear-both">
            <span class="date">{{detailData.create_time}}</span>
            <span><i class="iconfont iconfont-shurukuangchakanmima"></i>&nbsp;&nbsp;{{detailData.records}}</span> 
            <div class="collect text-center float-right" @click="collectChange(detailData)">
                <span class="iconfont-shoucang1 iconfont" v-if="!shoucang"></span>
                <span class="iconfont-shoucang iconfont" v-else></span>
            </div>
        </div>
        <div class="content"> 
            <wxParse :content="detailData.content"/>
        </div>
    </div> 
</template>

<script> 
import wxParse from 'mpvue-wxparse'
import * as api from '@/utils/api' 
export default { 
    onLoad(opt){
        this.pageShow=false;
        this.getDetailList(opt.artId);
        this.artId=opt.artId;
        wx.setNavigationBarTitle({ title: opt.title });
    },
    data () {
        return {
            artId:'',//id
            shoucang:false,
            detailData:{},
            pageShow:false,
        }
    },
    components: {
        wxParse
    },
    methods:{
        //获得文章详情
        getDetailList(id){
            let vm = this;
            let body={
                model: "Articles",
                with:{
                    "0":"tabs",
                    "1":"collects",
                    "2":"shares",
                    "3":"records"
                },
                condition:{
                    article_id: id
                }
            }
            api.getInfoById(body).then(res=>{
                vm.pageShow=true;
                if(res.data.code==200){
                    vm.detailData=res.data.data;
                    res.data.data.is_collect==0?vm.shoucang=false:vm.shoucang=true;
                };
            })
        }, 
        //收藏
        collectChange(item){
            let vm = this;
            let body={
                model: "Records",
                data:{
                    uid: wx.getStorageSync('u_id'),      
                    resource_id: item.article_id,   
                    type:1,        
                    resource_type: item.tabs.type,   
                    category:"1" 
                } 
            }; 
            if(vm.shoucang){
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        vm.getDetailList(vm.artId);
                        wx.showToast({icon:'none', title: '取消成功' })
                    }
                });
            }else{
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        vm.getDetailList(vm.artId);
                        wx.showToast({icon:'none', title: '收藏成功' })
                    }
                });
            }
            
        },
    }, 
}

</script>
<style lang="scss">
.article-detail{
    padding:20rpx;
    box-sizing:border-box;
    background:#fff;
    .head{
        color:#111;
        font-size:34rpx;
    }
    .art-info{
        line-height:40rpx;
        font-size:28rpx;
        color:#949494;
        margin:20rpx 0;
        .date{
            margin-right:40rpx;
        }
        .iconfont{
            font-size:24rpx;
        } 
    }
    .content{
        font-size:28rpx;
        color:#333;
        image,img{
            width:100% !important;
        }
    }
    .collect{
        background:#fff;
        margin-right:30rpx;
        span{ 
            color:#E05957;
            font-size:40rpx;
            font-weight:bold;
        } 
    }
} 
</style>
